<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js"></script>
</head>

<body>
    <div class="div">
        <button @click="fetchs">点击</button>
        <ul>
            <template v-for="i in datelis">
                <li>
                    演员:{{i.name}}<br>
                    剧名:{{i.all}}
                </li>
            </template>
        </ul>
    </div>
    <script>
        const obj = {
            data() {
                return {
                    datelis: []
                }
            },

            methods: {

                fetchs() {
                    // 基于promise
                    // fetch("./text.json")
                    // .then(res=>res.json())
                    // .then(res=>{
                    //     console.log(res)
                    //     this.datelis=res.yy
                    // } )


                    // 如果你不知道后端或者什么过来的数据是不是json还是字符串就用res.text() 但是这个不常用
                    // fetch("./text.json")
                    // .then(res=>res.text())
                    // .then(res=>console.log(res) )


                    // 这是get使用node环境数据
                    // fetch("http://localhost:3000/yy")
                    // .then(res=>res.json())
                    // .then(res=>{
                    //     console.log(res)
                    //     this.datelis=res
                    // } )

                  
                    // post -from-格式数据 看后台能接收什么格式
                                fetch("http://localhost:3000/yy",
                                    {
                                        method: 'post',//大小写都行
                                        headers: {
                                            "content-type": "application/x-www-form-urlencoded",
                                        },
                                        body: "name='历飞羽'&all='凡人修仙'"
                                    })
                                    .then(res => res.json())
                                    .then(res => {
                                     console.log(res);
                                    })

                    
                    // 因为利用npm工具包侦听npmtext.json这个文件的数据生成了个地址http://localhost:3000/yy接口
                    // post-json格式数据 看后台能接收什么格式
                                    // fetch("http://localhost:3000/yy",
                                    //     {
                                    //         method: 'post',//大小写都行
                                    //         // 类型
                                    //         headers: {
                                    //             "content-type": "application/json",
                                    //         },
                                    //         // 数据 向http://localhost:3000/yy 里传入数据
                                    //         body:JSON.stringify({
                                    //             name:"韩立",
                                    //             all:"凡人修仙传",
                                    //         })
                                    //     })
                                    //     .then(res => res.json())
                                    //     .then(res => {
                                    //      console.log(res);
                                    //     }).catch(err => {  //请求数据时候失败了就走 .catch 成功走 .then
                                    //     console.log(err);
                                    // })
 
                    //  put 更新 把npmtext.json中id是3的数据更新为  name:"石昊",all:"完美世界",
                                    // fetch("http://localhost:3000/yy/3",
                                    //     {
                                    //         method: 'put',//大小写都行
                                    //         // 类型
                                    //         headers: {
                                    //             "content-type": "application/json",
                                    //         },
                                    //         // 数据
                                    //         body:JSON.stringify({
                                    //             name:"石昊",
                                    //             all:"完美世界",
                                    //         })
                                    //     })
                                    //     .then(res => res.json())
                                    //     .then(res => {
                                    //      console.log(res);
                                    //     })


                    // delete 删除 把npmtext.json中id是4的数据删除

                                // fetch("http://localhost:3000/yy/4",
                                //     {
                                //         method: 'delete',//大小写都行
                                //     })
                                //     .then(res => res.json())
                                //     .then(res => {
                                //      console.log(res);
                                //     })
                }
            }
        }
        Vue.createApp(obj).mount('.div')
    </script>
</body>

</html>